<template>
  <div>
    <MyHeader></MyHeader>
    <div class="main">
      <MyBody v-for="item in listGoods" :key="item.id" :lists="item"></MyBody>
    </div>
    <MyFlooter :goods='listGoods'></MyFlooter>
  </div>
</template>

<script>
import MyHeader from "@/components/MyHeader.vue";
import MyBody from "@/components/MyBody.vue";
import MyFlooter from "@/components/MyFlooter.vue";
export default {
  components: {
    MyHeader,
    MyBody,
    MyFlooter,
  },
  created() {
    this.getGoodsList();
  },
  data() {
    return {
      listGoods: [],
    };
  },
  methods: {
    async getGoodsList() {
      const { data: res } = await this.$http.get("/api/cart");
      this.listGoods = res.list;
    },
  },
};
</script>

<style>
.main {
  margin: 45px 0 50px;
}
</style>
